<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" >

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
</head>
<body>
<center>
    <h3>添加页面</h3>

    <form id="form">
        <div class="form-group">
            <label for="username">分类名称</label>
            <input type="email" class="form-control" id="username" name="username" placeholder="请输入分类名称">
        </div>
        <div class="form-group">
            <label for="logo">logo</label>
            <input type="file" class="form-control" id="logo" name="logo">
        </div>

        <button type="button" class="btn btn-default">添加</button>
    </form>
</center>

</body>

<script>

    // 添加功能 异步上传、上传至七牛云
    // 添加请求接口的需要传递token、token从哪获取？

    $('button').click(function () {
        // 获取表单数据
        let  from_data = document.getElementById('form');//原生的js获取值、出现异常
        let  fromData = new FormData(from_data);// 构造一个表单一摸一样的结构

        // 添加数据里面追加token
        var token = window.localStorage.getItem('token');
        fromData.append('token',token);
        $.ajax({
            url:"/api/add",
            data:fromData,
            dataType:'json',
            processData:false,// 设置不转化格式、
            contentType:false,
            type:'POST',
            success:function (response) {

            }
        })
    });

</script>
</html>